<template>
  <div style="height: 100%">
    <el-container style="height: 100%">
      <el-aside
          style="background: linear-gradient(90deg, rgb(2, 49, 80) 0%, rgb(0, 39, 77) 50%, rgb(11, 34, 69) 100%);width: 250px;">
        <div style="height: 80%">
          <el-row class="tac">
            <el-col>
              <div style="padding: 15px;border-bottom:1px solid rgb(15, 68, 108);height: 75px;">
                <h3 style="color: aliceblue">FILE SYSTEM </h3>
              </div>
              <div style="width: 100%">
                <div class="administrator">
                  <span class="labelHeader">Administrator</span>
                </div>
                <button type="button" class = "menuItem" v-bind:class="Selected==='bt1' ? 'selected':''" @click="menuItemClick('bt1')">
                   <span style="gap: 25px;display: flex">
                     <i class="el-icon-folder"></i>
                     <span >文档管理</span>
                   </span>
                </button>
                <button type="button" class = "menuItem" v-bind:class="Selected==='bt4' ? 'selected':''" @click="menuItemClick('bt4')">
                  <span style="gap: 25px;display: flex">
                    <i class="el-icon-picture"></i>
                  <span>图片管理</span>
                  </span>
                </button>
                <button type="button" class = "menuItem" v-bind:class="Selected==='bt2' ? 'selected':''" @click="menuItemClick('bt2')">
                   <span style="gap: 25px;display: flex">
                     <i class="el-icon-sort"></i>
                     <span>视频管理</span>
                   </span>
                </button>
                <button type="button" class = "menuItem" v-bind:class="Selected==='bt3' ? 'selected':''" @click="menuItemClick('bt3')">
                  <span style="gap: 25px;display: flex">
                    <i class="el-icon-delete"></i>
                  <span>回收站</span>
                  </span>
                </button>
                <div>
                  <div class="administrator"></div>
                </div>
                <button type="button" class = "menuItem" v-bind:class="Selected==='logout' ? 'selected':''" @click="menuItemClick('logout')">
                   <span style="gap: 25px;display: flex">
                     <i class="el-icon-switch-button"></i>
                     <span>退出</span>
                   </span>
                </button>
              </div>

            </el-col>
          </el-row>
        </div>
        <div style="height: 20%">
          <el-button icon="el-icon-upload"
                     type="primary"
                     round
                     size="medium"
                     @click="upload_dialog.open=true"
          >上传
          </el-button>
        </div>
      </el-aside>
      <el-main>
        <div class="pageHeader" style="display: block">

        </div>
      </el-main>
    </el-container>

  </div>
</template>
<style>
.pageHeader{
  display: flex;
  flex-flow: wrap;
  width: 100%;
  min-height: 83px;
  background-color: rgb(255, 255, 255);
  left: 0px;
  border-bottom: 1px solid rgb(229, 229, 229);
  -webkit-box-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  align-items: center;
}
.labelHeader{
  text-align: left;
  font-size: 14px;
  color: rgb(255, 255, 255);
  padding-bottom: 6px;
  display: block;
  margin: 30px 25px 0px;
}
.administrator{
  border-bottom: 1px solid rgb(15, 68, 108);
  margin: 30px 25px 0px;
  padding-bottom: 5px;
  user-select: none;
}
.menuItem:hover,.menuItem.selected{
  background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgb(20, 88, 122) 100%);
  transition: .5s;
}
.menuItem{
  gap : 15px;
  font-size: 17px;
  color: white;
  justify-content: space-between;
  border-color:Transparent;
  width: 100%;
  height: 44px;
  padding: 0px 25px;
  display: inline-block;
  text-align: center;
  background: transparent;
}
* {
  padding: 0;
  margin: 0;
  text-decoration: none;
  list-style: none;
  box-sizing: border-box;
}

li a {
  display: block;
  color: white;
  font-size: 17px;
  padding: 15px 20px;
  border-radius: 3px;
  text-transform: uppercase;
}

a.selected, a:hover {

  background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgb(20, 88, 122) 100%);;
  transition: .5s;
}

li {
  width: 100%;
  /*margin-left: 40px;*/
  float: left;
  display: block;
  padding: 0 25px;
}
</style>
<script>


export default {
  data() {
    return {
     Selected: null
    }
  },
  methods: {
    menuItemClick(id){
      this.Selected = id
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    }
  }
}
</script>
